<%@ Page Language="C#" AutoEventWireup="true" Inherits="Documentation_WebControls_ComboList" Codebehind="ComboList.aspx.cs" %>

<%@ Register Assembly="Pampa.WebControls" Namespace="Pampa.WebControls" TagPrefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="../../Css/Layout.css" rel="stylesheet" type="text/css"/>    
    <script type="text/javascript">
    function showValues() {
        var msg = "";
        
        msg += "Simple DropDown List Value: " + ComboList_Get('combo').GetValueList() + "\n";
        msg += "Editable DropDown List Value: " + ComboList_Get('editableCombo').GetValueList() + "\n";
        msg += "Multivalue DropDown List Value: " + CheckList_Get('checkList').GetValueList() + "\n";
        
        alert(msg);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span class="title">DropDown Lists & Check Lists</span>
        <br />
        <br />
        Pampa.WebControls has three different types of controls which allow you pick an item from a list<br />
        The advantages in comparison to Asp.NET built in lists are:
        <br/><br/>
        &nbsp;&nbsp;- Complete control about the over the appearance of the control. It is possible to change the styles and even the arrow images.
        <br/>
        &nbsp;&nbsp;- The multi-value list brings and innovative way to select several items. <br />           
        <br />
        <br />
        <br />
        
        <span class="subtitle">Simple DropDown List</span>   
        <br />             
        <br />                    
        <cc1:ComboList ID="combo" runat="server" Height="21px" Width="174px" />
        <br />
        <br />

        <span class="subtitle">Editable DropDown List</span>
        <br />
        <br />                    
        <cc1:ComboList ID="editableCombo" runat="server" Height="19px" Width="175px" />
        <br />
        <br />
        
        <span class="subtitle">Multivalue Check List</span>
        <br />
        <br />                    
        <cc1:CheckList ID="checkList" runat="server" Height="19px" Width="175px" />
        <br />
        <br />
        
        <span class="subtitle">How to add items to a list?</span>
        <br />
        <br />  
        Behaviour of these list are similar than the DropDownList from Asp.NET.<br/>
        You can use a ListItem object to add items to the list and you can retrieve the value of the list with the property value. 
        <br/>
        this.combo.Items.Add(new ListItem(<span class="metavalue">[label], [value]</span>));        
        <br />
        <br />      
        <div class="codeBlock" style="width:auto">   
            <span class="keyword">this</span>.Items.Add(<span class="keyword">new</span> <span class="className">ListItem</span>("Item 1", "1")); <br/>        
            <span class="keyword">this</span>.Items.Add(<span class="keyword">new</span> <span class="className">ListItem</span>("Item 2", "2")); <br/>        
            <span class="keyword">this</span>.Items.Add(<span class="keyword">new</span> <span class="className">ListItem</span>("Item 3", "3")); <br/>        
            ...       
        </div>
        <br />
        <br />    
        
        <span class="subtitle">What if I want to get the value of a list in the client side?</span>        
        <br />
        <br />  
        Firstly, it is important to say that there is a client side object representing the list in the client side.<br/>
        This object is an instance of WebComboList, in the case of Drop Down Lists and it is an instance of CheckList in the case of Check Lists.
        You can obtain the client side objects and their values in this way:
        <br/>
        <br />      
        
        <div class="codeBlock" style="width:auto">   
            var comboList = ComboList_Get(ID);<br />
            var value = comboList.GetValueList();<br />
            ... <br />      
            <br />
            var checkList = CheckList_Get(ID);<br />
            var value = checkList.GetValueList();<br />
            ...<br />                
        </div>
        
        <br />        
        Please select any values and &nbsp;&nbsp;<button onclick="showValues()">Test</button>
        <br />        
        <br />
        
        If you want to have more control over the client side list you can check all the public functions availables 
        in <a href="/Pampa.Web/Resources/Pampa.WebControls/ComboList.js">ComboList.js</a> and <a href="/Pampa.Web/Resources/Pampa.WebControls/CheckList.js">CheckList.js</a>
        <br />    
    </div>
    </form>
</body>
</html>
